<template>
  <el-card class="box-card table">
    <template #header>
      <div class="card-header">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>编辑角色</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <router-link :to="{ path: '/auth/role/list' }">
          <el-button
            class="button"
            type="success"
            icon="el-icon-back"
            size="small"
            >返回</el-button
          >
        </router-link>
      </div>
    </template>
    <div class="body">
      <el-form
        :model="form"
        ref="form"
        status-icon
        :rules="rules"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-form-item label="code" prop="code">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="创建者" prop="create_by">
            <el-input v-model="form.create_by"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="创建时间" prop="created_at">
            <el-input v-model="form.created_at"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="更新者" prop="update_by">
            <el-input v-model="form.update_by"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="更新时间" prop="updated_at">
            <el-input v-model="form.updated_at"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="是否禁用" prop="forbidden">
            <el-select v-model="form.forbidden" placeholder="请选择">
              <el-option value="1" label="是"></el-option>
              <el-option value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
        <el-button type="primary" @click="submitForm('form')"
          >修改</el-button
        >
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { roleEdit, roleAdd } from "@/api/index.js";
export default {
  name: "RoleEdit",
  data() {
    return {
      form: {},
      rules: {
        code: [{ required: true, message: "请输入角色code", trigger: "blur" }],
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getInit();
  },
  methods: {
    async getInit() {
      var param = {};
      param.id = this.$route.query.id;
      var that = this;
      await roleEdit(param)
        .then(function (res) {
          that.form = res.data;
          console.log(res);
        })
        .catch();
    },
    async submitForm(form) {
      //自动验证
      this.$refs[form].validate((valid) => {
        if (!valid) {
          return false;
        }
      });
      await roleAdd(this.form)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
			this.$message.success("编辑成功");
			this.$router.push("/auth/role/list");
          } else {
            this.$message.error("编辑失败");
          }
        })
        .catch((error) => {});
    }
  },
};
</script>
